<template>
  <div class="subject">
    <ul>
      <li v-for="item in list.data" :key="item.id">
        <img :src="item.scene_pic_url" alt="" />
        <h4>{{ item.title }}</h4>
        <p>{{ item.subtitle }}</p>
        <span v-if="item.price_info">￥{{ item.price_info }}起</span>
      </li>
    </ul>
    <div class="btn">
      <button @click.stop="changeSubtract" :disabled="flag">上一页</button>
      <button @click.stop="changeAdd" :disabled="flag">下一页</button>
    </div>
  </div>
</template>

<script setup>
import { getTopicList } from "../server/topic.js";
import { ref, onMounted } from "vue";
let list = ref([]);
let page = ref(1);
let flag = ref(false);
// 获取专题数据
function getList() {
  getTopicList({ page: page.value, size: 5 }).then((res) => {
    list.value = res.data;
    flag.value = false;
  });
}
// 下一页
function changeAdd() {
  if (page.value >= list.value.count / 5) return;
  flag.value = true;
  ++page.value;
  getList();
}
// 上一页
function changeSubtract() {
  if (page.value <= 1) return;
  flag.value = true;
  --page.value;
  getList();
}
onMounted(() => {
  getList();
});
</script>

<style scoped>
.subject {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
li > img {
  height: 13rem;
  display: block;
  width: 100%;
}
li > h4 {
  width: 100%;
  margin: 0.625rem 0;
  font-size: 1.125rem;
  font-weight: 500;
}
li > p {
  width: 100%;
  font-size: 1rem;
  line-height: 1.375rem;
  margin: 0.3125rem 0;
}
li > span {
  display: block;
  width: 100%;
  margin: 0.625rem 0;
  letter-spacing: 2px;
  color: red;
}
.btn {
  width: 100%;
  height: 2.5rem;
  background-color: yellow;
  display: flex;
  justify-content: center;
  margin: 1.25rem 0;
  margin-bottom: 3.125rem;
}
.btn > button {
  flex: 1;
  background-color: #fff;
  border: 1px solid #f6f6f6;
}
</style>
